<template>
  <div class="page-container">
    <!--工具栏-->
    <div class="toolbar">
      <el-form :inline="true" :model="filters" :size="size" label-width="100px">
        <el-row class="search-input">
          <el-form-item label="商品编码：">
            <el-input v-model="filters.productCode" maxlength="80" clearable placeholder="请输入商品编码"></el-input>
          </el-form-item>
          <el-form-item label="店铺名称：">
            <el-input v-model="filters.storeName" maxlength="80" clearable placeholder="请输入店铺名称"></el-input>
          </el-form-item>
          <el-form-item label="交易币别：">
            <el-select v-model="filters.transactionCurrency" placeholder="全部" style="width: 200px;">
              <el-option label="AUD" value="AUD">AUD</el-option>
              <el-option label="CNY" value="CNY">CNY</el-option>
              <el-option label="GBP" value="GBP">GBP</el-option>
              <el-option label="USD" value="USD">USD</el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row style="margin-top: 7px;">
          <el-form-item label="订单编号：">
            <el-input v-model="filters.orderNo" maxlength="80" clearable placeholder="请输入订单编号"></el-input>
          </el-form-item>

          <el-form-item label="订单状态：">
            <el-select v-model="filters.orderStatus" placeholder="订单状态" style="width: 200px;">
              <el-option label="初始化" value="1">初始化</el-option>
              <el-option label="确认收货" value="2">确认收货</el-option>
              <el-option label="已完成" value="3">已完成</el-option>
              <el-option label="已关闭" value="4">已关闭</el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="所属平台：">
            <el-select v-model="filters.ownedPlatform" placeholder="所属平台" style="width: 200px;">
              <el-option label="初始化" value="1">初始化</el-option>
              <el-option label="确认收货" value="2">确认收货</el-option>
              <el-option label="已完成" value="3">已完成</el-option>
              <el-option label="已关闭" value="4">已关闭</el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row class="search-button">
          <el-form-item>
            <kt-button
              icon="fa fa-search"
              :label="$t('action.search')"
              type="primary"
              @click="findPage"
            />
          </el-form-item>
          <el-form-item>
            <kt-button
              icon="fa fa-refresh"
              :label="$t('action.reset')"
              @click="reset"
              type="primary"
            />
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <!--表格内容栏-->
    <cy-table
      :operationWidth="300"
      :height="350"
      :data="filterColumns"
      :columns="columns"
      :showBatchDelete="false"
      :showDeleteOperation="false"
      :showSelection="false"
      :showDetailOperation="false"
      :showEditOperation="false"
      :showOperation="false"
      @findPage="findPage"
      ref="CyTable"
    ></cy-table>
  </div>
</template>

<script>
  import CyTable from "@/views/Core/JicTable";
  import KtButton from "@/views/Core/KtButton";

  export default {
    components: {
      CyTable,
      KtButton,
    },
    data() {
      return {
        size: "small",
        filters: {
          storeName: "",
          transactionCurrency: "",
          orderNo: "",
          orderStatus: "",
          productCode: ""
        },
        filterColumns: [{
          orderNo:"111",
          orderStatus:"111",
          brandName:"111",
          productCategory:"111",
          type:"111",
          productCode:"111",
          productName:"111",
          saleUnitPrice:"111",
          salePrice:"",
          productNum:"",
          productTotal:"",
          ownedPlatform:"",
          storeCode:"111",
          storeName:"111",
          supplierName:"111",
          taxRate:"",
          transactionCurrency:"",
          totalCost:"111",
          productProperty:"",
          noTaxIncome:"",
          inTaxCostPrice:"111",
          noCostPrice:"111",
          tax:"111",
          productUnit:"111",
          createTime:new Date()
        }],
        columns: [
          {prop: "orderNo", label: "订单编号", minWidth: 120},
          {prop: "orderStatus", label: "订单状态", minWidth: 120, formatter: this.statusFormat},
          {prop: "brandName", label: "品牌", minWidth: 120},
          {prop: "productCategory", label: "商品类目", minWidth: 120},
          {prop: "type", label: "类别", minWidth: 120},
          {prop: "productCode", label: "商品编码", minWidth: 120},
          {prop: "productName", label: "商品名称", minWidth: 120},
          {prop: "saleUnitPrice", label: "销售单价", minWidth: 120},
          {prop: "salePrice", label: "商品销售价", minWidth: 150},
          {prop: "productNum", label: "商品购买数量", minWidth: 150},
          {prop: "productTotal", label: "商品总金额", minWidth: 150},
          {prop: "productProperty", label: "商品规格", minWidth: 120},
          {prop: "storeCode", label: "店铺编码", minWidth: 120},
          {prop: "storeName", label: "店铺名称", minWidth: 120},
          {prop: "ownedPlatform", label: "所属平台", minWidth: 120},
          {prop: "supplierName", label: "供应商", minWidth: 120},
          {prop: "taxRate", label: "税率", minWidth: 120},
          {prop: "transactionCurrency", label: "交易币别", minWidth: 120},
          {prop: "totalCost", label: "总成本", minWidth: 120},
          {prop: "noTaxIncome", label: "收入(去税)", minWidth: 120},
          {prop: "inTaxCostPrice", label: "成本单价(含税)", minWidth: 120},
          {prop: "noCostPrice", label: "成本单价(去税)", minWidth: 120},
          {prop: "tax", label: "税额", minWidth: 120},
          {prop: "productUnit", label: "计量单位", minWidth: 120},
          {prop: "productType", label: "商品类型", minWidth: 120, formatter: this.typeFormat},
          {prop: "createTime", label: "创建时间", minWidth: 180}
        ],
        pageRequest: {pageNum: 1, pageSize: 10},
        pageResult: {},
      };
    },
    methods: {
      // 获取分页数据
      findPage: function (data) {
        let this_ = this;
        if (this_.filters == undefined || this_.filters == "") {
          this_.filters = {};
        }
        this_.filters.pageNum = this.pageRequest.pageNum;
        this_.filters.pageSize = this.pageRequest.pageSize;
        // this.utils.request.getOrderSale(this_.filters, function (res) {
        this_.$refs.CyTable.findPage({
          content: this_.filterColumns,
          total: 10
        });
        //   if (res.data.rows.length==0) {
        //     this_.$message({message: "查询暂无数据", type: "warning"});
        //    }
        //
        // });
      },

      typeFormat: function (row, column, cellValue, index) {
        if (cellValue == 1) {
          return "无仓";
        } else if (cellValue == 2) {
          return "普通";
        }
      },

      statusFormat: function (row, column, cellValue, index) {
        if (cellValue == 1) {
          return "初始化";
        } else if (cellValue == 2) {
          return "确认收货";
        } else if (cellValue == 3) {
          return "已完成";
        } else if (cellValue == 4) {
          return "已关闭";
        }
      },

      reset: function () {
        if (this.filters.storeName == "" && this.filters.transactionCurrency == "" && this.filters.orderNo == ""
          && this.filters.orderStatus == "" && this.filters.productCode == ""
        ) {
          this.$message({message: "请输入查询条件", type: "warning"});
          return false
        }
        this.filters = {
          storeName: "",
          transactionCurrency: "",
          orderNo: "",
          orderStatus: "",
          productCode: ""
        };
        this.findPage()
      },

      // 处理表格列过滤显示
      initColumns: function () {
        var temp = [];
        $.each(this.columns, function (key, val) {
          temp.push(val);
        });
        this.filterColumns = temp;
      }
    },
    mounted() {
      this.initColumns();
    }
  };
</script>

<style scoped lang='scss'>
  /deep/  .el-input__inner  {
        width: 200px;
  }

   .el-form-item--mini.el-form-item,
   .el-form-item--small.el-form-item  {
        margin-bottom: 10px;
  }
</style>
